<template>
    <div>
        <div class="rate">
            <span v-for="num in 5":key='num'>☆</span>
            <span class="hollow">
                <span v-for="num in 5":key='num'>★</span>
            </span>
        </div>
    </div>
</template>

<script setup>
import { defineProps , computed , defineEmits ,ref} from 'vue';

    let props = defineProps({
        value:Number, 
        })
    function mouseOver(i){
        width.value = i
    }

    function mouseOut(){
        width.value = props.value
    }
</script>

<style lang="css" scoped>
     .rate{
        position:relative ;
        display: block;

    }
    .rate > span {
        letter-spacing:3px
      
    }
    .rate > span.hollow {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 0;
        overflow: hidden; 
    }
</style>